<template>
	<view class="Loin_content">
		<view class="header">
			<view class="pwd_back">
				<image src="../../static/image/pwd_back_icon.png" @tap="back"></image>
			</view>
			<text class="login_text" >{{i18n.forgotpassword}}</text>
			<!-- 用户名 -->
			<view class="input_content account_name" :style="i18n.wjimg1"><input type="text" :placeholder="i18n.input_placeholder1" 
			v-model="phone"
			placeholder-class="input_placeholder" :style="i18n.input_placeholder"/></view>
			<!-- 密码 -->
			<view class="Verification_Code vcode">
				<view class="vcode_input"  :style="i18n.wjimg2"><input type="text" :placeholder="i18n.input_placeholder2" 
				v-model="vcode"
				placeholder-class="input_placeholder" :style="i18n.input_placeholder"/></view>
				<text @tap="send_vcode" v-if="sendVode">{{i18n.send_vcode}}</text>
				<text v-else>{{vtext}}</text>
			</view>
			<!-- 登录按钮 -->
			<image class="login_btn" :src="changeColor?'':i18n.nextimg" @tap="next"></image>
			
			<!-- 忘记密码和注册 -->
			<view class="ext_options">
				<text @tap="login">{{i18n.ljdl}}</text>
				<text @tap="register">{{i18n.zhzc}}</text>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				phone:"", //手机号
				vcode:"",   //验证码
				sendVode:true,
				vtext:"发送验证码",
				changeColor:false
			}
		},
		computed: {
			changeData() {
				const { phone, vcode} = this
				return {
					phone,
					vcode
				}
			},
			i18n() {
				return this.$t('user')
			}
		},
		watch: {
			changeData: {
				handler: function (newval, oldval) {
					this.phone = newval.phone;
					this.vcode = newval.vcode;
					if(this.phone != "" && this.vcode != ""){
						this.changeColor = true
					}else{
						this.changeColor = false
					}
				},
				deep: true
			}
		},
		methods: {
			register(){
				this.$CommonJS.navigateTo('../register/register')
			},
			next(){
				const _this=this
				//验证参数
				if(!this.phone){
					this.$CommonJS.showToast(_this._i18n.locale == 'zh_CN' ? '请输入手机号':'Please enter your mobile phone number');
					return;
				}
				if(!this.$CommonJS.PhoneValidate(this.phone)){
					this.$CommonJS.showToast(_this._i18n.locale == 'zh_CN' ? '手机号不正确':'Incorrect mobile phone number');
					return;
				}
				if(!this.vcode){
					this.$CommonJS.showToast(_this._i18n.locale == 'zh_CN' ? '请输入验证码':'Please enter the verification code');
					return;
				}
				//下一步
				this.$CommonJS.navigateTo('./pwd_setp2?mobile='+this.phone+'&valcode='+this.vcode)
			},
			login(){
				uni.navigateBack({
					url:"../login/login"
				})
				// this.$CommonJS.navigateTo('../login/login')
			},
			back(){
				this.$CommonJS.navigateBack()
			},
			send_vcode(){
				//发送验证码
				const _this = this;
				
				
				if(!this.phone){
					this.$CommonJS.showToast(_this._i18n.locale == 'zh_CN' ? '请输入手机号':'Please enter your mobile phone number');
					return;
				}
				if(!this.$CommonJS.PhoneValidate(this.phone)){
					this.$CommonJS.showToast(_this._i18n.locale == 'zh_CN' ? '手机号不正确':'Incorrect mobile phone number');
					return;
				}
				
			uni.showLoading({
				
			})
				const url = this.$API.appServeApi + this.$API.getForgetcode + '?i18n_language=' + uni.getStorageSync('system_info') + "&mobile=" + this.phone+ "&rtype=0&codetype=1";
				console.log(url)
				this.$CommonJS.request(url,"POST").then(res => {
					if(res.data.code==200){
						_this.getTime();
							_this.$CommonJS.showToast(_this._i18n.locale == 'zh_CN' ? '验证码已发送':'Verification code sent')
							uni.hideLoading()
					}else{
							_this.$CommonJS.showToast(res.data.message)
								uni.hideLoading()
					}
				
				}).catch(error => {
					//console.log(error)
					_this.$CommonJS.showToast(error.message)
						uni.hideLoading()
				})
			},
			getTime(){
				//倒计时60s
				var _this = this;
				
				var num = 60;
			  var timer =	 setInterval(function(){
					if(num <= 0){
						clearInterval(timer);
						_this.vtext = "";
						_this.sendVode = true;
						return;
					}
					
					_this.vtext = '重新发送' + num + 's';
					
					num --;
				},1000)
				_this.sendVode = !_this.sendVode;
			},
			
		}
	}
</script>

<style lang="stylus">
	@import "../../static/stylus/password/password.stylus"
	.input_placeholder
		font-size 13px
		color rgba(255,255,255,0.3) 
		// width  calc(100% - 70upx)
		text-align right
</style>
